<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>开通年费</title>
    <script src="__INDEX__/js/mui.min.js"></script>
	<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
	<link rel="stylesheet" href="__INDEX__/css/style.css" />
	<link rel="stylesheet" href="__INDEX__/css/mall.css" />
	<style type="text/css">
		#qrcode{background: #E1E1E1; width: 150px; height: 150px;}
		canvas{width: 150px; height: 150px;}
		.tgerweim{width: 156px; height: 156px;}
		.nianfbox{background: white;}
		.nianfbox .tip{font-size: .85rem;}
		.nianfbox .fuk_pribox{color: #EE2F71; font-size: 1.2rem; padding: 1.1rem 0 .5rem;}
		.tgewmtip{font-size: .95rem; line-height: 2.2rem;}
		.nianf_num em{font-size: 1.8rem; padding-right: 5px;}
	</style>
</head>

<body>
	<div class="mui-content">
		<div class="nianfbox">
			<div class="fuk_conbox">
				<div class="fuk_center">
					<div class="tip">商户开通服务费</div>
					<div class="fuk_pribox">
						<span>¥</span>
						<span class="nianf_num"><em>{$annual_info['annual_fee']}</em>元/年</span>
					</div>
				</div>
				<form class="layui-form update_form">
				    <div class="xiey_group" style="padding: 0;">
						<input name="checkbox" id="checkbox" value="Item 1" type="checkbox" checked="">
						<span><a href="about.html">服务协议</a></span>					
					</div>
				</form>
			</div>
		</div>
		<div class="tgewm_box" id="payment_conbox" style="border-top: 15px solid #EEEEEE;">
			<div class="tgerweim">
				<div id="qrcode"></div>
				<div id="qrcode2" style="display: none;"></div>
			</div>
			<div class="tgewmtip">微信或支付宝扫一扫，付款成为会员</div>
			<div class="tgewm_tip">会员赚鼓励金，折扣更多，优惠更多！</div>
		</div>
		<div id ='cut_img'></div>
	</div>
</body>
{include file="member/bottom" /}
<link rel="stylesheet" href="__PUBLIC__/static/layui/css/layui.css">
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/layui/layui.all.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.qrcode.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/utf.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/zepto-1.1.6.min.js"></script>
<script type="text/javascript" src='__PUBLIC__/static/js/html2canvas.js'></script>
<script type="text/javascript">
	mui.init();
	var aniShow = "pop-in";
	//页面跳转
	mui('#footer-list').on('tap', 'a', function() {
		var id = this.getAttribute('href');
		var href = this.href;
		mui.openWindow({
			id: id,
			url: this.href,
			show: {
				aniShow: aniShow
			},
			waiting: {
				autoShow: false
			}
		});
	});
</script>
<script>
	var url = "{$annual_info['url_code']}";
	 $("#qrcode").qrcode({
        render 		: "canvas",    		//设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
        text 		: url,    		//扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
        width 		: "250",    	//二维码的宽度
        height 		: "250",    	//二维码的高度
        background 	: "#ffffff",    //二维码的后景色
        foreground 	: "#000000",    //二维码的前景色
        src			: "__PUBLIC__/static/logo/1/logomr.png"  			//二维码中间的图片
    });
    setTimeout(function(){
		html2canvas($("#payment_conbox"), {
			 onrendered: function (canvas) {
			     var url = canvas.toDataURL(); //base64数据
			     var image = new Image();
			     image.src = url;
			     image.id = 'div_img';
			     $('#cut_img').append(image);
			     $('#payment_conbox').hide();
			   }
			});
	},1000);
</script>
